<template>
  <div class="userManager" class="ibox">
      <div class="ibox-title">
          <h5>用户管理</h5>
          <div class="ibox-tools">
              <a href="#" class="dh"><i class="fa fa-chevron-up"  v-on:click="toggle"></i></a>
              
              <a href="#"><i class="fa fa-times"></i></a>
          </div>
      </div>
      <div class="ibox-centent" v-show="isShow">
          <div class="row">
              <div class="search">
                      <el-input placeholder="请输入员工编号或姓名查询" v-model="input5" class="wi">
                      <el-button slot="append" @click="exportFile">查询</el-button>
                      </el-input>
              </div>
              <div class="search wi">
                      <el-button slot="append">
                          <a href="#">
                            <i class="fa fa-user-plus"></i>&nbsp新增</a>  
                      </el-button>
                      <el-button slot="append">
                          <a href="#">
                            <i class="fa fa-refresh"></i></a>  
                      </el-button>
                      <div class="search-r"></div>  
              </div>
              <!-- fa fa-refresh -->
              <div class="tt">
                <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" width="49">
                        </el-table-column>
                        <el-table-column property="userid" label="用户名" width="120"></el-table-column>
                        <el-table-column property="username" label="姓名" width="80"></el-table-column>
                        <el-table-column property="rolesname" label="角色" width="200">
                        <template scope="scope">
                            <span v-for="(role,i) in scope.row.roles"><el-tag type="success">{{role.name}}</el-tag>&nbsp</span>    
                        </template>
                        </el-table-column>
                        <el-table-column property="" label="操作" width="620">
                            <template scope="scope">
                            <span class="opt-btn-sp"><a ><i class="fa fa-key"></i>角色授权</a>
                            <a ><i class="fa fa-database"></i>总部部门授权 </a>
                            <a ><i class="fa fa-database"></i>高管单位授权</a>
                            <a ><i class="fa fa-database"></i>业务单位授权 </a>
                            <a ><i class="fa fa-database"></i>部门授权</a>
                            </span>   
                        
                            <span class="delete"><a><i class="fa fa-remove"></i></a></span>    
                            </template>
                        </el-table-column>
                </el-table>
                        
              </div>
              
          </div>
          <div class="fy">
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination
                    @size-change="handleSizeChange"
                    :page-size="100"
                    layout="prev, pager, next, jumper"
                    :total="1000">
                    </el-pagination>
                </div>
        </div>
      </div>
  </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import {
  ButtonGroup,
  Switch,
  Select,
  Input,
  Col,
  Row,
  Radio,
  RadioGroup,
  RadioButton,
  Table,
  TableColumn,
  Tag,
  Pagination
} from "element-ui";
Vue.use(ButtonGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Input);
Vue.use(Col);
Vue.use(Row);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Tag);
Vue.use(Pagination);

import cardLeader from "@/components/card-leader";
import searchBox from "@/components/search-box";
import adminUrl from "@/common/js/adminUrl";
export default {
  data() {
    return {
      isShow: true,
      tableData: null,
      currentRow: null,
      input5: ""
    };
  },
  mounted() {
    this.Axios.Post(adminUrl.queryUser.url, {}).then(function(res) {
      self.tableData = res.data.datas;
    });
    //绑定子页面需要的刷新模块方法
  },
  methods: {
    handleCurrentChange() {},
    currentPage3() {},

    toggle() {
      this.isShow = !this.isShow;
    },
    exportFile: function() {
      var self = this;
      var params = {
        employeeIdOrName: "10000001"
      };

      this.Axios
        .Post(this.URL.queryUser.url, params)
        .then(function(res) {
          console.log(res);
        });
    },
    handleSizeChange() {
      console.log(1);
    }
  },

  beforeDestroy: function() {
    window.getFlowProcessFrom = null;
    window.getFlowProcessApplyFrom = null;
    window.getFlowProcessApprovedFrom = null;
  },
  components: {
    cardLeader,
    searchBox
  }
};
</script>

<style scoped>
.userManager .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.userManager .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}
.content-right {
  float: right;
  margin-top: 17px;
}

.userManager .select-dept {
  font-size: 14px;
}
.userManager .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}
.userManager .switch-btn {
  padding: 10px 10px;
}
.userManager .collapse-card {
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.userManager .third-card {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.userManager .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.userManager .third-card .collapse-card .box-title .box-header > .box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
.userManager .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
/*content*/
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}

.ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}
.ibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}
/*ibox-centent*/
.ibox-centent {
  padding: 20px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
}
.row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .wi {
  width: 33.3333333%;
}
.el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
}
.search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}
.el-button .r {
  width: 66.66666667%;
}
.el-input-group__append .el-button {
  background: #1ab394;
  color: #fff;
}
/*table*/
.el-table__header-wrapper thead div {
  background-color: #fff;
  color: #1f2d3d;
}
.btn-sp {
  padding-left: -10px;
}
.btn-sp > a {
  border: 1px solid #23c6c8;
  background: #23c6c8;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.delete > a {
  border: 1px solid #ec4758;
  background: #ec4758;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
<style>
/*修改element-ui样式*/

.userManager .el-radio-button__inner:hover {
  color: #333;
}
.userManager .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.userManager .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.userManager .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
/*i*/
.userManager .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}
.userManager .el-input-group--append .el-input__inner,
.userManager .el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
}
.userManager .el-input-group__append .el-button[data-v-4fefba28] {
  border: 1px solid #1ab394;
  border-radius: 0px 3px 3px 0px;
  line-height: 0.99;
}
/*table*/
.userManager .el-table {
  border: none !important;
}
.userManager .el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}
.userManager .el-table__footer-wrapper thead div,
.userManager .el-table__header-wrapper thead div {
  background: #fff !important;
}
.userManager .el-table .cell {
  padding: 10px;
  cursor: pointer;
}
.userManager .el-table__body-wrapper {
  overflow: visible !important;
}
.userManager .el-table .cell,
.userManager .el-table th > div {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.userManager .ibox-tools dh {
  background: red;
  display: inline-block;
}
</style>
